<template>
    <el-container>
        <el-aside width="400px">
            <div class="rental-look">
                <div class="look-box">
                    <el-tree
                        :data="rentalLook"
                        :props="defaultProps"
                        accordion
                        show-checkbox
                        :expand-on-click-node="false"
                        :check-on-click-node="true"
                        @node-click="handleNodeClick">
                    </el-tree>
                </div>
            </div>
        </el-aside>
        <el-main>
            <div class="resource-manage" v-if="parentNodeFlag">
                <div class="card-box">
                    <div class="card-title">项目信息</div>
                    <div class="sub-box">
                        <div class="card-title">基本信息</div>
                        <el-form class="form-wrap" size="small">
                            <el-form-item label="物业地址" class="full">
                                <el-col class="in_txt">{{getCardTypeValue(propForm.rentProjectVo.cityCode,cityAssembly)}}{{getCardTypeValue(propForm.rentProjectVo.countyCode,districtCollection)}}{{getCardTypeValue(propForm.rentProjectVo.projectStreet,streets)}}{{getCardTypeValue(propForm.rentProjectVo.communityName,communityNames)}}{{propForm.rentProjectVo.addressInfo}}</el-col>
                            </el-form-item>
                            <el-form-item label="地图坐标">
                                <el-col class="in_txt">{{propForm.rentProjectVo.mapCoordinates}}</el-col>
                            </el-form-item>
                            <el-form-item label="项目名称">
                                <el-col class="in_txt">{{propForm.rentProjectVo.propertyName}}</el-col>
                            </el-form-item>
                            <el-form-item label="曾用名">
                                <el-col class="in_txt">{{propForm.rentProjectVo.usedName}}</el-col>
                            </el-form-item>
                            <el-form-item label="总栋数(栋)">
                                <el-col class="in_txt">{{propForm.rentProjectVo.totalBuildings}}</el-col>
                            </el-form-item>
                            <el-form-item label="建筑面积(m²)">
                                <el-col class="in_txt">{{propForm.rentProjectVo.buildArea}}</el-col>
                            </el-form-item>
                            <el-form-item label="非经营面积(m²)">
                                <el-col class="in_txt">{{propForm.rentProjectVo.unmanagedArea}}</el-col>
                            </el-form-item>
                            <el-form-item label="经营面积(m²)">
                                <el-col class="in_txt">{{propForm.rentProjectVo.managedArea}}</el-col>
                            </el-form-item>
                            <el-form-item label="管理权属">
                                <el-col class="in_txt">{{getCardTypeValue(propForm.rentProjectVo.manageUnit,manageUnits)}}</el-col>
                            </el-form-item>
                            <el-form-item label="占地面积(m²)">
                                <el-col class="in_txt">{{propForm.rentProjectVo.floorSpace}}</el-col>
                            </el-form-item>
                        </el-form>
                        <div class="card-title">土地信息</div>
                        <el-form class="form-wrap" size="small">
                            <el-form-item label="宗地号">
                                <el-col class="in_txt">{{propForm.rentLandVo.parcelNum}}</el-col>
                            </el-form-item>
                            <el-form-item label="宗地面积(m²)">
                                <el-col class="in_txt">{{propForm.rentLandVo.parcelArea}}</el-col>
                            </el-form-item>
                            <el-form-item label="土地用途">
                                <el-col class="in_txt">{{getCardTypeValue(propForm.rentLandVo.landUse,landUses)}}</el-col>
                            </el-form-item>
                           <!-- <el-form-item label="土地合同号">
                                <el-col class="in_txt">{{propForm.rentLandVo.landContractNum}}</el-col>
                            </el-form-item>-->
                            <el-form-item label="地址">
                                <el-col class="in_txt">{{propForm.rentLandVo.addressInfo}}</el-col>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="card-box border-margin">
                    <div class="card-title">物业信息</div>
                    <div class="card-table">
                        <el-table :data="propForm.rentPropertyVos"  style="width: 100%;">
                            <el-table-column prop="serialNumber" label="序号" width="80"></el-table-column>
                            <el-table-column prop="propertyName" label="物业名称" width="120"></el-table-column>
                            <el-table-column prop="buildingArea" label="建筑面积(m²)" width="120"></el-table-column>
                            <el-table-column prop="projectType" label="用途大类" width="120">
                                <template slot-scope="scope">
                                    <span>{{getCardTypeValue(scope.row.projectType,projectTypes)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="projectSubclassType" label="用途小类" width="120">
                                <template slot-scope="scope">
                                    <span>{{getCardTypeValue(scope.row.projectSubclassType,propertyUseTypes)}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="card-box">
                    <div class="card-title">文件上传</div>
                    <div style="padding: 20px 20px">
                        <upload-media
                            type="file"
                            ref="myUpload"
                            :url="fileUploadUrl"
                            :busId="projectId"
                            :modelType="modelType"
                            :propsFileList="uploadFileList"
                            :isView=true>
                        </upload-media>
                    </div>
                </div>
            </div>
            <div class="resource-manage" v-else>
                <div class="card-box">
                    <div class="card-title">物业信息</div>
                    <div class="sub-box">
                        <div class="card-title">基本信息</div>
                        <el-form class="form-wrap" size="small">
                            <el-form-item label="楼栋名称">
                                <el-col class="in_txt">{{baseForm.buildingName}}</el-col>
                            </el-form-item>
                            <el-form-item label="所属楼层">
                                <el-col class="in_txt">{{baseForm.floor}}</el-col>
                            </el-form-item>
                            <el-form-item label="物业名称">
                                <el-col class="in_txt">{{baseForm.propertyName}}</el-col>
                            </el-form-item>
                            <el-form-item label="建筑面积(m²)">
                                <el-col class="in_txt">{{baseForm.buildingArea}}</el-col>
                            </el-form-item>
                            <el-form-item label="物业大类">
                                <el-col class="in_txt">{{getCardTypeValue(baseForm.projectType,projectTypes)}}</el-col>
                            </el-form-item>
                            <el-form-item label="物业小类">
                                <el-col class="in_txt">{{getCardTypeValue(baseForm.projectSubclassType,propertyUseTypes)}}</el-col>
                            </el-form-item>
                            <el-form-item label="经营情况">
                                <el-col class="in_txt">{{getCardTypeValue(baseForm.operation,operations)}}</el-col>
                            </el-form-item>
                            <el-form-item label="可用状态">
                                <el-col class="in_txt">{{getCardTypeValue(baseForm.status,roomUseStatus)}}</el-col>
                            </el-form-item>
                            <el-form-item label="规划用途">
                                <el-col class="in_txt">{{getCardTypeValue(baseForm.planUse,planUses)}}</el-col>
                            </el-form-item>
                            <el-form-item label="停车位数(个)" v-if="this.baseForm.planUse === '30'">
                                <el-col class="in_txt">{{baseForm.parkingSpotNum}}</el-col>
                            </el-form-item>
                            <el-form-item label="物业来源">
                                <el-col class="in_txt">{{getCardTypeValue(baseForm.propertySource,propertySources)}}</el-col>
                            </el-form-item>
                            <el-form-item label="物业权属">
                                <el-col class="in_txt">{{getCardTypeValue(baseForm.propertyOwnership,belongs)}}</el-col>
                            </el-form-item>
                            <el-form-item label="VR地址">
                                <el-col class="in_txt">{{baseForm.vrUrl}}</el-col>
                            </el-form-item>
                        </el-form>
                        <div class="card-title">其他信息</div>
                        <el-form class="form-wrap" size="small">
                            <el-form-item label="移交方式">
                                <el-col class="in_txt">{{getCardTypeValue(baseForm.transferType,transferModeOption)}}</el-col>
                            </el-form-item>
                            <el-form-item label="移交单位">
                                <el-col class="in_txt">{{baseForm.transferUnit}}</el-col>
                            </el-form-item>
                            <el-form-item label="移交日期">
                                <el-col class="in_txt">{{baseForm.receiveTime}}</el-col>
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-col class="in_txt">{{baseForm.transferDesc}}</el-col>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="card-box border-margin">
                    <div class="card-title">经营情况调整记录</div>
                    <div class="card-table">
                        <el-table :data="baseForm.records"  style="width: 100%;" v-if="isRouterAlive">
                            <el-table-column prop="businessOperationBefore" label="调整前" width="120">
                                <template slot-scope="scope">{{getCardTypeValue(scope.row.businessOperationBefore,operations)}}</template>
                            </el-table-column>
                            <el-table-column prop="businessOperationAfter" label="调整后" width="120">
                                <template slot-scope="scope">{{getCardTypeValue(scope.row.businessOperationAfter,operations)}}</template>
                            </el-table-column>
                            <el-table-column prop="adjustDate" label="调整时间" :formatter="dataFormat" width="120"></el-table-column>
                            <el-table-column prop="adjustUserName" label="调整人" width="120"></el-table-column>
                        </el-table>
                    </div>
                </div>
                <!--<div class="card-box">
                    <div class="card-title">该物业使用历史</div>
                    <el-table :data="baseForm.usageHistory"  style="width: 100%;">
                        <el-table-column prop="serialNumber" label="序号" width="80"></el-table-column>
                        <el-table-column prop="businessId" label="编号" width="120"></el-table-column>
                        <el-table-column prop="projectName" label="使用单位" width="120"></el-table-column>
                        <el-table-column prop="propertyName" label="物业名称" width="120"></el-table-column>
                        <el-table-column prop="buildingArea" label="建筑面积(m²)" width="120"></el-table-column>
                    </el-table>
                </div>-->
            </div>
            <div class="resource-manage">
                <div class="card-box">
                    <el-button type="primary" class="propForm-btn" @click="handleShutDown()">关闭</el-button>
                </div>
            </div>
        </el-main>
    </el-container>
</template>

<script src="./rental_look.js">

</script>

<style scoped lang="scss">

    @include formWrap(4);
    .rental-look {
        margin: 20px 24px;
        .look-box {
            background-color: #fff;
            border-radius: 5px;
            min-height: 240px;
            height: calc(100vh - 224px)!important;
            /deep/.el-tree-node__label {
                font-size: 16px;
            }
            /deep/.el-tree-node__content {
                height: 50px;
            }
        }
    }
    /deep/.el-main {
        padding-left: 0;
    }
    .in_txt {
        color: #999999;
    }
    .card-box {
        margin-bottom: 24px;
        overflow: hidden;
        .sub-box {
            padding: 20px;
        }
        /deep/ .el-table__empty-block {
            width: 100% !important;
        }
        /deep/ .el-table__empty-text {
            margin-left: auto;
            width: 100%;
        }
        /deep/.el-table__header {
            max-width: 100%!important;
        }
        /deep/.el-table__body {
            max-width: 100%!important;
        }
        .propForm-btn {
            margin: 20px;
            float: right;
        }
    }
    .border-margin {
        .card-title {
            margin-bottom: 20px;
        }
        .card-table {
            margin: 20px;
        }
    }
</style>
